<template>
	<view>
		
		<view class="cards">
			<view class="title">
				<view class="title_weight" @click="goDetail(cardInfo.titleInfo.title)" >
					{{cardInfo.titleInfo.title}}
					<text v-if="cardInfo.titleInfo.sex" class="title_sex">{{cardInfo.titleInfo.sex}}</text>
				</view>
				<view style="font-size: 24rpx;" v-if="cardInfo.titleInfo.stateInfo">
					<uni-icons class="title_state" v-if="cardInfo.titleInfo.state" type="smallcircle-filled" size="8"
						:color="cardInfo.titleInfo.color"></uni-icons>
					{{cardInfo.titleInfo.stateInfo}}
				</view>
			</view>
			<view :class="cardInfo.operate.show?'cardContent':'cardContent falseBorder'">
				<!-- 竞争对手|订单管理|营销活动|商机管理|线索管理 -->
				<view v-if="cardInfo.cardType !== '联系人'" class="Layouttrue">
					<!-- 竞争对手|订单管理|营销活动|商机管理|线索管理 -->
					<view v-if="cardInfo.cardType !== '客户管理'" class="leftList">
						<view v-for="item in cardInfo.content.orderMarketAndCom.info" :key="item.name">{{item.name}}:
							{{item.value}}
						</view>
					</view>
					<!-- 客户管理 -->
					<view v-else class="leftList">
						<view>
							<text>{{cardInfo.content.orderMarketAndCom.info[0].name}}：{{cardInfo.content.orderMarketAndCom.info[0].value}}</text>
						</view>
						<view>
							<text>{{cardInfo.content.orderMarketAndCom.info[1].name}}</text>：
							<uni-icons
								v-for="(item, index) in startEvaluate(cardInfo.content.orderMarketAndCom.info[1].value)"
								:type='item' :key="index" size="14"></uni-icons>
						</view>
					</view>
					<!-- 右侧个人信息 -->
					<view class="rightHead" @click="goPersonInfo(cardInfo.content.orderMarketAndCom)">
						<uni-icons v-if="cardInfo.content.orderMarketAndCom.image === ''" type="contact-filled" size="40"
							color="#999">
						</uni-icons>
						<image v-else :src="cardInfo.content.orderMarketAndCom.image" />
						<view @click="jumpGeren">{{cardInfo.content.orderMarketAndCom.peopleName}}</view>
					</view>
				</view>
				<!-- 联系人 -->
				<view v-if="cardInfo.cardType === '联系人'" class=" contacts">
					<view v-for="item in cardInfo.content.contacts">
						{{item.name}}：{{item.value}}
					</view>
				</view>
			</view>
			<view v-if="cardInfo.operate.show" :class="cardInfo.operate.borderTop? 'operate borderTop':'operate' ">
				<view class="operate_icon" v-for="(item,index) in cardInfo.operate.info" :key="item.name">
					<view @click="iconEvent(item)">
						<uni-icons :type="item.type" size="12"
							v-if='index !== (cardInfo.operate.info.length - 1)'></uni-icons>
						<text>{{item.name}}</text>
						<uni-icons :type="item.type" size="12"
							v-if='index === (cardInfo.operate.info.length - 1)'></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="cards">
			<view class="title">
				<view class="title_weight" @click="goDetail(cardInfo.titleInfo.title)" >
					{{cardInfo.titleInfo.title}}
					<text v-if="cardInfo.titleInfo.sex" class="title_sex">{{cardInfo.titleInfo.sex}}</text>
				</view>
				<view style="font-size: 24rpx;" v-if="cardInfo.titleInfo.stateInfo">
					<uni-icons class="title_state" v-if="cardInfo.titleInfo.state" type="smallcircle-filled" size="8"
						:color="cardInfo.titleInfo.color"></uni-icons>
					{{cardInfo.titleInfo.stateInfo}}
				</view>
			</view>
			<view :class="cardInfo.operate.show?'cardContent':'cardContent falseBorder'">
				<!-- 竞争对手|订单管理|营销活动|商机管理|线索管理 -->
				<view v-if="cardInfo.cardType !== '联系人'" class="Layouttrue">
					<!-- 竞争对手|订单管理|营销活动|商机管理|线索管理 -->
					<view v-if="cardInfo.cardType !== '客户管理'" class="leftList">
						<view v-for="item in cardInfo.content.orderMarketAndCom.info" :key="item.name">{{item.name}}:
							{{item.value}}
						</view>
					</view>
					<!-- 客户管理 -->
					<view v-else class="leftList">
						<view>
							<text>{{cardInfo.content.orderMarketAndCom.info[0].name}}：{{cardInfo.content.orderMarketAndCom.info[0].value}}</text>
						</view>
						<view>
							<text>{{cardInfo.content.orderMarketAndCom.info[1].name}}</text>：
							<uni-icons
								v-for="(item, index) in startEvaluate(cardInfo.content.orderMarketAndCom.info[1].value)"
								:type='item' :key="index" size="14"></uni-icons>
						</view>
					</view>
					<!-- 右侧个人信息 -->
					<view class="rightHead" @click="goPersonInfo(cardInfo.content.orderMarketAndCom)">
						<uni-icons v-if="cardInfo.content.orderMarketAndCom.image === ''" type="contact-filled" size="40"
							color="#999">
						</uni-icons>
						<image v-else :src="cardInfo.content.orderMarketAndCom.image" />
						<view @click="jumpGeren">{{cardInfo.content.orderMarketAndCom.peopleName}}</view>
					</view>
				</view>
				<!-- 联系人 -->
				<view v-if="cardInfo.cardType === '联系人'" class=" contacts">
					<view v-for="item in cardInfo.content.contacts">
						{{item.name}}：{{item.value}}
					</view>
				</view>
			</view>
			<view v-if="cardInfo.operate.show" :class="cardInfo.operate.borderTop? 'operate borderTop':'operate' ">
				<view class="operate_icon" v-for="(item,index) in cardInfo.operate.info" :key="item.name">
					<view @click="iconEvent(item)">
						<uni-icons :type="item.type" size="12"
							v-if='index !== (cardInfo.operate.info.length - 1)'></uni-icons>
						<text>{{item.name}}</text>
						<uni-icons :type="item.type" size="12"
							v-if='index === (cardInfo.operate.info.length - 1)'></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="cards">
			<view class="title">
				<view class="title_weight" @click="goDetail(cardInfo.titleInfo.title)" >
					{{cardInfo.titleInfo.title}}
					<text v-if="cardInfo.titleInfo.sex" class="title_sex">{{cardInfo.titleInfo.sex}}</text>
				</view>
				<view style="font-size: 24rpx;" v-if="cardInfo.titleInfo.stateInfo">
					<uni-icons class="title_state" v-if="cardInfo.titleInfo.state" type="smallcircle-filled" size="8"
						:color="cardInfo.titleInfo.color"></uni-icons>
					{{cardInfo.titleInfo.stateInfo}}
				</view>
			</view>
			<view :class="cardInfo.operate.show?'cardContent':'cardContent falseBorder'">
				<!-- 竞争对手|订单管理|营销活动|商机管理|线索管理 -->
				<view v-if="cardInfo.cardType !== '联系人'" class="Layouttrue">
					<!-- 竞争对手|订单管理|营销活动|商机管理|线索管理 -->
					<view v-if="cardInfo.cardType !== '客户管理'" class="leftList">
						<view v-for="item in cardInfo.content.orderMarketAndCom.info" :key="item.name">{{item.name}}:
							{{item.value}}
						</view>
					</view>
					<!-- 客户管理 -->
					<view v-else class="leftList">
						<view>
							<text>{{cardInfo.content.orderMarketAndCom.info[0].name}}：{{cardInfo.content.orderMarketAndCom.info[0].value}}</text>
						</view>
						<view>
							<text>{{cardInfo.content.orderMarketAndCom.info[1].name}}</text>：
							<uni-icons
								v-for="(item, index) in startEvaluate(cardInfo.content.orderMarketAndCom.info[1].value)"
								:type='item' :key="index" size="14"></uni-icons>
						</view>
					</view>
					<!-- 右侧个人信息 -->
					<view class="rightHead" @click="goPersonInfo(cardInfo.content.orderMarketAndCom)">
						<uni-icons v-if="cardInfo.content.orderMarketAndCom.image === ''" type="contact-filled" size="40"
							color="#999">
						</uni-icons>
						<image v-else :src="cardInfo.content.orderMarketAndCom.image" />
						<view @click="jumpGeren">{{cardInfo.content.orderMarketAndCom.peopleName}}</view>
					</view>
				</view>
				<!-- 联系人 -->
				<view v-if="cardInfo.cardType === '联系人'" class=" contacts">
					<view v-for="item in cardInfo.content.contacts">
						{{item.name}}：{{item.value}}
					</view>
				</view>
			</view>
			<view v-if="cardInfo.operate.show" :class="cardInfo.operate.borderTop? 'operate borderTop':'operate' ">
				<view class="operate_icon" v-for="(item,index) in cardInfo.operate.info" :key="item.name">
					<view @click="iconEvent(item)">
						<uni-icons :type="item.type" size="12"
							v-if='index !== (cardInfo.operate.info.length - 1)'></uni-icons>
						<text>{{item.name}}</text>
						<uni-icons :type="item.type" size="12"
							v-if='index === (cardInfo.operate.info.length - 1)'></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="cards">
			<view class="title">
				<view class="title_weight" @click="goDetail(cardInfo.titleInfo.title)" >
					{{cardInfo.titleInfo.title}}
					<text v-if="cardInfo.titleInfo.sex" class="title_sex">{{cardInfo.titleInfo.sex}}</text>
				</view>
				<view style="font-size: 24rpx;" v-if="cardInfo.titleInfo.stateInfo">
					<uni-icons class="title_state" v-if="cardInfo.titleInfo.state" type="smallcircle-filled" size="8"
						:color="cardInfo.titleInfo.color"></uni-icons>
					{{cardInfo.titleInfo.stateInfo}}
				</view>
			</view>
			<view :class="cardInfo.operate.show?'cardContent':'cardContent falseBorder'">
				<!-- 竞争对手|订单管理|营销活动|商机管理|线索管理 -->
				<view v-if="cardInfo.cardType !== '联系人'" class="Layouttrue">
					<!-- 竞争对手|订单管理|营销活动|商机管理|线索管理 -->
					<view v-if="cardInfo.cardType !== '客户管理'" class="leftList">
						<view v-for="item in cardInfo.content.orderMarketAndCom.info" :key="item.name">{{item.name}}:
							{{item.value}}
						</view>
					</view>
					<!-- 客户管理 -->
					<view v-else class="leftList">
						<view>
							<text>{{cardInfo.content.orderMarketAndCom.info[0].name}}：{{cardInfo.content.orderMarketAndCom.info[0].value}}</text>
						</view>
						<view>
							<text>{{cardInfo.content.orderMarketAndCom.info[1].name}}</text>：
							<uni-icons
								v-for="(item, index) in startEvaluate(cardInfo.content.orderMarketAndCom.info[1].value)"
								:type='item' :key="index" size="14"></uni-icons>
						</view>
					</view>
					<!-- 右侧个人信息 -->
					<view class="rightHead" @click="goPersonInfo(cardInfo.content.orderMarketAndCom)">
						<uni-icons v-if="cardInfo.content.orderMarketAndCom.image === ''" type="contact-filled" size="40"
							color="#999">
						</uni-icons>
						<image v-else :src="cardInfo.content.orderMarketAndCom.image" />
						<view @click="jumpGeren">{{cardInfo.content.orderMarketAndCom.peopleName}}</view>
					</view>
				</view>
				<!-- 联系人 -->
				<view v-if="cardInfo.cardType === '联系人'" class=" contacts">
					<view v-for="item in cardInfo.content.contacts">
						{{item.name}}：{{item.value}}
					</view>
				</view>
			</view>
			<view v-if="cardInfo.operate.show" :class="cardInfo.operate.borderTop? 'operate borderTop':'operate' ">
				<view class="operate_icon" v-for="(item,index) in cardInfo.operate.info" :key="item.name">
					<view @click="iconEvent(item)">
						<uni-icons :type="item.type" size="12"
							v-if='index !== (cardInfo.operate.info.length - 1)'></uni-icons>
						<text>{{item.name}}</text>
						<uni-icons :type="item.type" size="12"
							v-if='index === (cardInfo.operate.info.length - 1)'></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="cards">
			<view class="title">
				<view class="title_weight" @click="goDetail(cardInfo.titleInfo.title)" >
					{{cardInfo.titleInfo.title}}
					<text v-if="cardInfo.titleInfo.sex" class="title_sex">{{cardInfo.titleInfo.sex}}</text>
				</view>
				<view style="font-size: 24rpx;" v-if="cardInfo.titleInfo.stateInfo">
					<uni-icons class="title_state" v-if="cardInfo.titleInfo.state" type="smallcircle-filled" size="8"
						:color="cardInfo.titleInfo.color"></uni-icons>
					{{cardInfo.titleInfo.stateInfo}}
				</view>
			</view>
			<view :class="cardInfo.operate.show?'cardContent':'cardContent falseBorder'">
				<!-- 竞争对手|订单管理|营销活动|商机管理|线索管理 -->
				<view v-if="cardInfo.cardType !== '联系人'" class="Layouttrue">
					<!-- 竞争对手|订单管理|营销活动|商机管理|线索管理 -->
					<view v-if="cardInfo.cardType !== '客户管理'" class="leftList">
						<view v-for="item in cardInfo.content.orderMarketAndCom.info" :key="item.name">{{item.name}}:
							{{item.value}}
						</view>
					</view>
					<!-- 客户管理 -->
					<view v-else class="leftList">
						<view>
							<text>{{cardInfo.content.orderMarketAndCom.info[0].name}}：{{cardInfo.content.orderMarketAndCom.info[0].value}}</text>
						</view>
						<view>
							<text>{{cardInfo.content.orderMarketAndCom.info[1].name}}</text>：
							<uni-icons
								v-for="(item, index) in startEvaluate(cardInfo.content.orderMarketAndCom.info[1].value)"
								:type='item' :key="index" size="14"></uni-icons>
						</view>
					</view>
					<!-- 右侧个人信息 -->
					<view class="rightHead" @click="goPersonInfo(cardInfo.content.orderMarketAndCom)">
						<uni-icons v-if="cardInfo.content.orderMarketAndCom.image === ''" type="contact-filled" size="40"
							color="#999">
						</uni-icons>
						<image v-else :src="cardInfo.content.orderMarketAndCom.image" />
						<view @click="jumpGeren">{{cardInfo.content.orderMarketAndCom.peopleName}}</view>
					</view>
				</view>
				<!-- 联系人 -->
				<view v-if="cardInfo.cardType === '联系人'" class=" contacts">
					<view v-for="item in cardInfo.content.contacts">
						{{item.name}}：{{item.value}}
					</view>
				</view>
			</view>
			<view v-if="cardInfo.operate.show" :class="cardInfo.operate.borderTop? 'operate borderTop':'operate' ">
				<view class="operate_icon" v-for="(item,index) in cardInfo.operate.info" :key="item.name">
					<view @click="iconEvent(item)">
						<uni-icons :type="item.type" size="12"
							v-if='index !== (cardInfo.operate.info.length - 1)'></uni-icons>
						<text>{{item.name}}</text>
						<uni-icons :type="item.type" size="12"
							v-if='index === (cardInfo.operate.info.length - 1)'></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="cards">
			<view class="title">
				<view class="title_weight" @click="goDetail(cardInfo.titleInfo.title)" >
					{{cardInfo.titleInfo.title}}
					<text v-if="cardInfo.titleInfo.sex" class="title_sex">{{cardInfo.titleInfo.sex}}</text>
				</view>
				<view style="font-size: 24rpx;" v-if="cardInfo.titleInfo.stateInfo">
					<uni-icons class="title_state" v-if="cardInfo.titleInfo.state" type="smallcircle-filled" size="8"
						:color="cardInfo.titleInfo.color"></uni-icons>
					{{cardInfo.titleInfo.stateInfo}}
				</view>
			</view>
			<view :class="cardInfo.operate.show?'cardContent':'cardContent falseBorder'">
				<!-- 竞争对手|订单管理|营销活动|商机管理|线索管理 -->
				<view v-if="cardInfo.cardType !== '联系人'" class="Layouttrue">
					<!-- 竞争对手|订单管理|营销活动|商机管理|线索管理 -->
					<view v-if="cardInfo.cardType !== '客户管理'" class="leftList">
						<view v-for="item in cardInfo.content.orderMarketAndCom.info" :key="item.name">{{item.name}}:
							{{item.value}}
						</view>
					</view>
					<!-- 客户管理 -->
					<view v-else class="leftList">
						<view>
							<text>{{cardInfo.content.orderMarketAndCom.info[0].name}}：{{cardInfo.content.orderMarketAndCom.info[0].value}}</text>
						</view>
						<view>
							<text>{{cardInfo.content.orderMarketAndCom.info[1].name}}</text>：
							<uni-icons
								v-for="(item, index) in startEvaluate(cardInfo.content.orderMarketAndCom.info[1].value)"
								:type='item' :key="index" size="14"></uni-icons>
						</view>
					</view>
					<!-- 右侧个人信息 -->
					<view class="rightHead" @click="goPersonInfo(cardInfo.content.orderMarketAndCom)">
						<uni-icons v-if="cardInfo.content.orderMarketAndCom.image === ''" type="contact-filled" size="40"
							color="#999">
						</uni-icons>
						<image v-else :src="cardInfo.content.orderMarketAndCom.image" />
						<view @click="jumpGeren">{{cardInfo.content.orderMarketAndCom.peopleName}}</view>
					</view>
				</view>
				<!-- 联系人 -->
				<view v-if="cardInfo.cardType === '联系人'" class=" contacts">
					<view v-for="item in cardInfo.content.contacts">
						{{item.name}}：{{item.value}}
					</view>
				</view>
			</view>
			<view v-if="cardInfo.operate.show" :class="cardInfo.operate.borderTop? 'operate borderTop':'operate' ">
				<view class="operate_icon" v-for="(item,index) in cardInfo.operate.info" :key="item.name">
					<view @click="iconEvent(item)">
						<uni-icons :type="item.type" size="12"
							v-if='index !== (cardInfo.operate.info.length - 1)'></uni-icons>
						<text>{{item.name}}</text>
						<uni-icons :type="item.type" size="12"
							v-if='index === (cardInfo.operate.info.length - 1)'></uni-icons>
					</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import uniicons from "../uni-icons/uni-icons.vue";
	export default {
		data() {
			return {
				data:{
					name:'李晓红',
					sex:"女",
					birthday:"1984-06-22",
					email:"Windir@AxureUX.com",
					phone:'1234353553',
					wxhao:'18033441894',
					linePhone:"12222222",
					workNumber:'10001',
					Origin:'河南',
					schoolEnd:"北大",
					endTime:'2019-09',
					Degree:'博士',
					grade:'心理学',
					deparent:'销售部',
					zhiwei:'销售经理'
				},
				cardInfo:{
					cardType:"客户管理",
					titleInfo:{
						title:'客户管理',
						color:"rgb(146,29,255)",
						state:true,
						stateInfo:'深圳木卫二科技有限公司'
					},
					content:{
						orderMarketAndCom:{
							peopleName:'李晓红',
							image:"",
							info:[{
								name:'最后跟进',
								value:"2019-6-25 14:45"
							},{
								name:"客户星级",
								value:4
							}]
						},
						contacts:[{
							name:"职务",
							value:"部门经理"
						},{
							name:'手机',
							value:'11111'
						},{
							name:'角色',
							value:'决策人'
						},{
							name:'生日',
							value:'111111'
						}
						]
					},
					operate:{
						show:true,
						borderTop:false,
						info:[{
							type:'chatbubble',
							name:'跟进'
						},{
							type:'list',
							name:'任务'
						},{
							type:'phone',
							name:'电话'
						},{
							type:'right',
							name:'更多'
						}
						]
					}
				}
			}
			
			////分隔线
		},
		// props: ['cardInfo'],
		methods: {
			// 标题的点击事件 ---> 跳转到公司详情页面
			goDetail(param) {
				uni.navigateTo({
					url:"/pages/my/kehuguanligengd/kehuguanligengd"
				})
				// this.$emit('callGoDetail', param)
			},
			// 头像的点击事件 ---> 跳转个人简介页面
			goPersonInfo(param) {
				this.$emit('callGoPersonInfo', param)
			},
			// 操作的点击事件 ---> 新建跟进、新建任务(普通任务、跟进任务)、打电话(固定电话、手机电话)、详情(与goDetail跳转相同)
			iconEvent(param) {
				this.$emit('callIconEvent', param)
			},
			// 星星评价
			startEvaluate(targetnum, num = 5) {
				let starsArr = ["star", "star", "star", "star", "star"];
				if (targetnum === 5) {
					starsArr = ['star-filled', 'star-filled', 'star-filled', 'star-filled', 'star-filled']
				} else {
					starsArr.splice(1, targetnum)
					for (let i = 0; i < targetnum; i++) {
						starsArr.unshift('star-filled')
					}
				}
				return starsArr;
			},
			jumpGeren(){
				uni.navigateTo({
				url:"/pages/my/geren/geren?data="+JSON.stringify(this.data)
				})
			}
			
		},
		components: {
			uniicons
		},
		mounted() {},
	}
</script>

<style scoped>
	.cards {
		min-width: 700rpx;
		background-color: white;
		min-height: 210rpx;
		margin: 0 auto;
		border-radius: 16rpx;
		color: #999;
		display: flex;
		flex-direction: column;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.047058823529411764);
		margin-bottom: 26rpx;
	}

	/* 标题部分style */
	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 80rpx;
		padding: 0 42rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.title_sex {
		margin-left: 18rpx;
		font-size: 24rpx;
		font-weight: 100;
	}

	.title_weight {
		font-weight: bolder;
	}

	.title_state {
		margin-right: 10rpx;
	}

	/* 内容区域style */
	.cardContent {
		padding: 0 42rpx 20rpx;
		box-sizing: border-box;
		flex: 1;
		width: 100%;
	}

	/* 中间内容区域有头像部分的style */
	.Layouttrue {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100%;
	}

	.contacts {
		display: flex;
		flex-wrap: wrap;
		height: 100%;
	}

	.contacts>view {
		width: 50%;
		/* padding: 2rpx 0;
		box-sizing: border-box; */
		line-height: 34rpx;
	}

	.leftList {
		font-size: 24rpx;
		text-align: left;
	}

	.leftList>view:nth-child(1) {
		margin-bottom: 10rpx;
	}

	.rightHead {
		font-size: 24rpx;
		display: flex;
		flex-direction: column;
		/* justify-content: space-between; */
		/* align-items: center; */
	}

	.linghtHeigth>view:nth-child(1) {
		margin-bottom: 10rpx;
	}

	.rightHead>image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-bottom: 8rpx;
	}

	/* 操作style */
	.operate {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 80rpx;
		font-size: 24rpx;
	}

	.borderTop {
		border-top: 1px solid #dedede;
	}

	.operate_icon {
		text-align: center;
	}

	.falseBorder {
		border-radius: 0 0 16rpx 16rpx;
	}
</style>